<template>
    <div class="label-radioGroup">
        <div class="left-label" :style="'width:' +  labelWidth + 'px'">
            <div style="color:red">*</div>
            <div class="margin-left_5">{{labelName}}</div>
        </div>
        <div>
            <a-radio-group :options="refRadioSource" v-model:value="refCheckedVlaue" :disabled="isChangeChecked" />
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'ProjectDetailLableRadio'
}
</script>
<script lang="ts" setup>
import { computed, ref, toRaw, getCurrentInstance, onMounted } from 'vue';

const { proxy, ctx } = getCurrentInstance() as any;
interface Props {
    labelName?: string,
    radioSource: any[],
    checkedVlaue: string,
    isChangeChecked?: boolean,

    labelWidth?: number,
}

let props = withDefaults(defineProps<Props>(), {
    isChangeChecked: true,

    labelWidth: 100
})

const refRadioSource = ref(props.radioSource);
const refCheckedVlaue = ref(props.checkedVlaue);
let emits = defineEmits(['inputChangeFunc'])
onMounted(() => {
    refRadioSource.value = props.radioSource;
    refCheckedVlaue.value = props.checkedVlaue;
})

// 需要传递的值
const handleChange = (e: any) => {
    // console.log('是否未声明toRaw', toRaw(props.inputValue));
    // console.log('是否未声明2', props.labelName);
    // console.log('是否未声3', changeValue.value);
    console.log('当前proxy', proxy);
    console.log('proxy的值', proxy.props.inputValue);
}
</script>
<style lang="less" scoped>
.label-radioGroup {
    display: flex;
    align-items: center;

    .left-label {
        float: left;
        display: flex;
        align-items: center;
    }

    .margin-left_5 {
        margin-left: 5px;
    }
}
</style>